<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>我的患者-51问医生</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    {{--<link rel="shortcut icon" href="/Public/mobile/favicon.ico" type="image/x-icon" />--}}
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="yes"/>
    <script src="{{url('/js/jquery.min.js')}}" type="text/javascript"></script>
    <link rel="stylesheet" href="{{url('new/css/common.css')}}" />

    <script src="{{url('new/js/doctor_list.js')}}"></script>
    <link rel="stylesheet" href="{{url('new/css/doctor_list.css')}}" />
    <style>
        html{cursor:pointer}
        .adList{width:100%;height:1.84375rem;overflow:hidden}
        .adList ul{width:100px;height:100%;-webkit-transition:transform 1s}
        .adList li{float:left;height:100%;width:100px}
        .adList a,.adList img
        {
            display:block;
            width:100%;
            height:100%
        }
        .head_seard{
            /*background-color: white;*/
            margin: .3125rem;
        }
        .head_seard .search_content{
            /*margin: 0 auto;*/
            /*width: 80%;*/
            height: 1.0rem;
            /*padding: 5px;*/
        }
        .search_content input{
            width: 73%;
            height: 100%;
            border-radius: .125rem;
            font-size: 0.5rem;
            /*box-shadow: 0.02125rem 0.02125rem 0.02125rem 0 rgba(0,0,0,.1);*/
            /*padding: 8px;*/
            border: none;
            box-shadow: 1px 1px 3px #888888;
        }
        .search_content button{
            height: 100%;
            width: 20%;
            border-radius: 7px;
            color: white;
            background-color: #ff9800;
            /*font-weight: bold;*/
            /*box-shadow: 0.02125rem 0.02125rem 0.02125rem 0 rgba(0,0,0,.1);*/
            /*padding: 11px;*/
            font-size: 0.5rem;
            border: none;
            /*box-shadow: 2px 2px 3px #888888;*/
            /*border: 1px solid #caae6f;*/
            box-shadow: 1px 1px 3px #888888;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            font-size: 0.42rem;
        }
        .qrcode{
            position: fixed;
            bottom: 50px;
            right: 16px;
            width: 40px;
            height: 40px;
        }
        .qrcode img{width: 100%}
        .bg{position:fixed;left:0;top:0;background:rgba(0,0,0,0.5);width: 100%;height: 100%;z-index: 100;display: none}
        .doc-qrcode{z-index: 101;width: 100%;height: 30%;position: fixed;text-align: center;top:33.33%;display: none}
        .doc-qrcode img{width: 150px;height: 150px}
        .qrcode-info{
            background-color: white;
            position: absolute;
            left: 33%;
        }
        .qrcode-content{
            background-color: white;
            display: block;
            padding: 5px;
        }
    </style>
</head>
<body style="font-size: 24px;width: 100%;height: 100%;margin: 0px;padding: 0px;">
<div class="recommend">
    <div class="header">
        <p class="location">
            <span class="location-icon"></span>
            <span>转诊-选择患者</span>
            <svg class="arrow-down">
                {{--<use xlink:href="#arrow_solid_down"></use>--}}
            </svg>
        </p>
        <div class="head_seard">
            <div class="search_content">
                <input type="text" id="search" placeholder="请输入患者姓名" value="@if(!is_null($keyword)){{$keyword}}@endif" />
                <button id="btn_search">搜索</button>
            </div>
        </div>
    </div>
    <ul class="doctorlist">
        @if(count($patients) > 0)
            @foreach($patients as $patient)
                <li>
                    <a class="new_p" href="{{route('M.Doctor.referral',['id'=>$patient->user_id])}}">
                        <div class="doclist-avatar">
                            <img src="@if($patient){{route('Api.Image.Show',['id'=>$patient->portrait_id])}}@else{{route('Api.Image.Show',['id'=>0])}}@endif"  />
                        </div>
                    </a>
                    <a class="new_p" href="{{route('M.Doctor.referral',['id'=>$patient->user_id])}}">
                        <div class="doclist-info" style="padding-bottom: 10px">
                            <p class="docname">
                                <span>{{$patient->realname}}</span>
                            </p>
                            <p class="deptname magrinTop5">@if($patient->sexual == 0)未知@elseif($patient->sexual == 1)男@else女@endif
                                <span class="color54 magrinLeft10">联系方式:{{$patient->phone}}</span></p>
                            <p class="deptname">出生年月:{{$patient->birthday}}</p>
                            {{--<p class="expert">简介--}}
                            {{--{{$patient->desc}}--}}
                            {{--</p>--}}
                        </div>
                    </a>
                </li>
            @endforeach
        @endif
    </ul>
</div>
<div class="qrcode">
    <img src="{{url('images/qrcode.png')}}">
</div>
<div class="bg"></div>
<div class="doc-qrcode">
    <div class="qrcode-info">
        <img src="@if($doctor){{route('Api.Image.Show',['id'=>$doctor->qrcode_id])}}@endif" />
        <span class="qrcode-content">让患者扫码关注我</span>
    </div>
</div>
</body>
<script>
    $(function(){
        $(document).on('click','#btn_search',function(){
            var keyword = $('#search').val();
            window.location.href = "{{route('M.Doctor.patientList')}}?keyword="+keyword;
        });

        var open = false;

        $(document).bind("click",function(e){
            if(open){
                var target = $(e.target);
                if(target.closest(".qrcode-info").length == 0){
                    $(".doc-qrcode").hide();
                    $(".bg").hide();
                    open = false;
                }
            }else {
                open = true;
            }
        })

        $('.qrcode').click(function () {
           $('.bg').show();
           $('.doc-qrcode').show();
        });
    });
</script>
</html>